<template>
	<view class="my-order">
		<g-navbar title="我的订单" />
		<view class="main">
			<custom-tabs type="c1" :value="current" @change="change" :tabSpacing="36">
				<custom-tab-pane style="width:100%" :label="item.label" name="c1_2" v-for="item,index in tabList"
					:key="index">
					<scroll-view scroll-y class="scroll-view" @scrolltolower="scrolltolower">
						<view class="order-list-wrapper">
							<orderItem v-for="subitem in item.list" :key="subitem.id" :orderDetail="subitem"
								@updateOrderList="updateOrderList" />
							<g-placeholder v-if="item.loading_status === LOADING_STATUS.NOMORE&&!item.list.length" />
							<uni-load-more iconType="circle" :status="item.loading_status" @click="getOrderList"
								v-else />
						</view>
					</scroll-view>
				</custom-tab-pane>
			</custom-tabs>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { computed, reactive, ref, Ref } from 'vue';
	import orderItem from './components/order-item/orderItem';
	import type { IMyOrderTab, ITabsChangeEvent, IGetOrderListOptions } from './types';
	import { ORDER_STATUS } from '@/enum/order';
	import { LOADING_STATUS } from '@/enum/loadingStatus';
	import { useStore } from 'vuex';
	import REST_URL from '@/http/http.restUrl';
	import goodsOrderItem from '@/components/goods_order_item/goodsOrderItem';
	import { GET_STORE_USERINFO } from '@/store/gettersType';

	const current : Ref<number> = ref(0);

	const tabList : IMyOrderTab[] = reactive([
		{
			label: '全部',
			value: ORDER_STATUS.ALL,
			loading_status: LOADING_STATUS.MORE,
			pageNum: 1,
			pageSize: 5,
			list: []
		},
		{
			label: '未付款',
			value: ORDER_STATUS.UNPAY,
			loading_status: LOADING_STATUS.MORE,
			pageNum: 1,
			pageSize: 5,
			list: []
		},
		{
			label: '待发货',
			value: ORDER_STATUS.UNDELIVERED,
			loading_status: LOADING_STATUS.MORE,
			pageNum: 1,
			pageSize: 5,
			list: []
		},
		{
			label: '已发货',
			value: ORDER_STATUS.DELIVERED,
			loading_status: LOADING_STATUS.MORE,
			pageNum: 1,
			pageSize: 5,
			list: []
		},
		{
			label: '已完成',
			value: ORDER_STATUS.COMPLETED,
			loading_status: LOADING_STATUS.MORE,
			pageNum: 1,
			pageSize: 5,
			list: []
		}
	])

	const store = useStore();


	const getOrderList = async () : Promise<void> => {
		await uni.loginManger.$interceptor;

		const currentIndex = current.value;
		if (tabList[currentIndex].loading_status !== LOADING_STATUS.MORE) return

		const options : IGetOrderListOptions = {
			customer_id: store.getters[GET_STORE_USERINFO].id,
			methods: tabList[currentIndex].value,
			page: tabList[currentIndex].pageNum,
			page_num: tabList[currentIndex].pageSize,
		}

		tabList[currentIndex].loading_status = LOADING_STATUS.LOADING;

		const { data, total } = (await uni.http.POST(REST_URL.getOrderList, options)).data;

		console.log(data);
		console.log(total)

		tabList[currentIndex].list.push(...data);

		tabList[currentIndex].pageNum++;

		tabList[currentIndex].loading_status = tabList[currentIndex].list.length >= total - 1 ? LOADING_STATUS.NOMORE : LOADING_STATUS.MORE;


	}

	const updateOrderList = () => {
		tabList.map((item : IMyOrderTab) => {
			item.pageNum = 1;
			item.loading_status = LOADING_STATUS.MORE;
			item.list = [];
			return item;
		})
		getOrderList();
	}


	const scrolltolower = () => {
		console.log('scrolltolower')
		getOrderList();
	}



	const change = (e : ITabsChangeEvent) => {
		current.value = e.value;
		if (tabList[current.value].list.length) return
		getOrderList();
	}

	getOrderList();
</script>

<style scoped lang="scss">
	@import "./myOrder.scss";
</style>